<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL Animated Star</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const gl = canvas.getContext('webgl');

        if (!gl) {
            console.error('WebGL not supported');
            throw 'WebGL not supported';
        }

        // Vertex shader source code
        const vertexShaderSource = `
        attribute vec2 a_position;
        uniform mat4 u_matrix;
        void main() {
            gl_Position = u_matrix * vec4(a_position, 0, 1);
        }
    `;

        // Fragment shader source code
        const fragmentShaderSource = `
        void main() {
            gl_FragColor = vec4(1, 0.5, 0, 1); // Orange color
        }
    `;

        // Create and compile the vertex shader
        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexShaderSource);
        gl.compileShader(vertexShader);
        // if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
        //     console.error('Vertex shader compilation error:', gl.getShaderInfoLog(vertexShader));
        //     gl.deleteShader(vertexShader);
        //     return;
        // }

        // Create and compile the fragment shader
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragmentShaderSource);
        gl.compileShader(fragmentShader);
        // if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
        //     console.error('Fragment shader compilation error:', gl.getShaderInfoLog(fragmentShader));
        //     gl.deleteShader(fragmentShader);
        //     return;
        // }

        // Create the shader program and link the shaders
        const program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        // if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        //     console.error('Program link error:', gl.getProgramInfoLog(program));
        //     gl.deleteProgram(program);
        //     return;
        // }

        gl.useProgram(program);

        // Define the star vertices
        const starVertices = new Float32Array([
            0, 0.5, -0.12, 0.15, -0.47, 0.15, -0.18, -0.05, -0.29, -0.4,
            0, -0.15, 0.29, -0.4, 0.18, -0.05, 0.47, 0.15, 0.12, 0.15
        ]);

        // Create a buffer and bind it
        const buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, starVertices, gl.STATIC_DRAW);

        // Get the attribute location, enable it
        const positionLocation = gl.getAttribLocation(program, 'a_position');
        gl.enableVertexAttribArray(positionLocation);

        // Point an attribute to the currently bound VBO
        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

        // Get the location of the matrix uniform
        const matrixLocation = gl.getUniformLocation(program, 'u_matrix');

        // Set up animation
        let angle = 0;
        function draw() {
            angle += 0.01;
            const cos = Math.cos(angle);
            const sin = Math.sin(angle);

            // Create the rotation matrix
            const matrix = new Float32Array([
                cos, -sin, 0, 0,
                sin, cos, 0, 0,
                0, 0, 1, 0,
                0, 0, 0, 1
            ]);

            // Set the matrix
            gl.uniformMatrix4fv(matrixLocation, false, matrix);

            // Clear the canvas
            gl.clear(gl.COLOR_BUFFER_BIT);

            // Draw the star
            gl.drawArrays(gl.LINE_LOOP, 0, 10);

            // Request a new frame
            requestAnimationFrame(draw);
        }

        // Start the animation loop
        requestAnimationFrame(draw);
    </script>
</body>

</html>